import React from "react";
import s from './index.scss'
import {Flex} from 'antd-mobile'
import Footer from 'components/Footer'
import AxHeader from 'components/AxHeader'
import {hashHistory} from 'React-Router'
import { connect } from "react-redux";
import ts1  from 'assets/images/threeapp/ts1.png'
import ts2  from 'assets/images/threeapp/ts2.png'
import ts3  from 'assets/images/threeapp/ts3.png'
import ts4  from 'assets/images/threeapp/ts4.png'
import ts5  from 'assets/images/threeapp/ts5.png'

import about1  from 'assets/images/threeapp/about1.png'
import about2  from 'assets/images/threeapp/about2.png'
import about3  from 'assets/images/threeapp/about3.png'

import about11  from 'assets/images/threeapp/about11.png'
import about22  from 'assets/images/threeapp/about22.png'
import about33  from 'assets/images/threeapp/about33.png'






@connect(
  state => ({
    common: state.common,
    login: state.login
  }),
  {
    
  }
)

export default class extends  React.PureComponent{

    constructor(props){
        super(props)
        this.state={
            isClick:false,
            item:0,
        }
        this.updateState = this.updateState.bind(this)
    }
    onSelected(e){
        this.setState({
            isClick:e,
            item:0
        })
    }
    updateState(arg){
        this.setState({
            item:arg
        })
        console.log(this.state.item)
    }
    itemStr(){
        if(this.state.item==0){
            return(<Flex direction="column" style={{padding:'5%',background:'#ECECFB'}}>
                    <Flex.Item style={{marginBottom:'0.2rem'}} onClick={this.updateState.bind(this,1)}>
                        <img style={{width:'100%'}} src={about1}/>
                    </Flex.Item>
                    <Flex.Item  style={{marginBottom:'0.2rem'}}  onClick={this.updateState.bind(this,2)}>
                        <img style={{width:'100%'}} src={about2}/>
                    </Flex.Item>
                    <Flex.Item  style={{marginBottom:'0.2rem'}}  onClick={this.updateState.bind(this,3)}>
                        <img style={{width:'100%'}} src={about3}/>
                    </Flex.Item>
            </Flex>)
        }else if(this.state.item==1){
            return(<Flex>
                <img style={{width:'100%'}} src={about11}/>
            </Flex>)
        }else if(this.state.item==2){
            return(<Flex>
                <img style={{width:'100%'}} src={about22}/>
            </Flex>)
        }else if(this.state.item==3){
            return(<Flex>
                <img style={{width:'100%'}} src={about33}/>
            </Flex>)
        }
    }

    render(){
        let itemStr = this.itemStr()
        return(<div className={`${s.SecurityProtectionBox}`}>

                <div>
                    <AxHeader/>
                    <Flex className={`${s.head}`}>
                        <Flex.Item onClick={this.onSelected.bind(this,false)} className={`${this.state.isClick==false?s.active:''}`}>产品特色</Flex.Item>
                        <Flex.Item onClick={this.onSelected.bind(this,true)} className={`${this.state.isClick==true?s.active:''}`}>安全保障</Flex.Item>
                    </Flex>
                    {this.state.isClick==true?<div>{itemStr}</div>
                    :<Flex direction="column">
                        <Flex.Item>
                            <img style={{width:'100%'}} src={ts1}/>
                        </Flex.Item>
                        
                        <Flex.Item className={`${s.color1}`} style={{padding:'2% 5%',marginTop:'0.1rem'}}>
                            <Flex.Item>
                                1.基于安心投平台优秀的风控团队，坚守自主实地调查，严把项目准入关 。
                            </Flex.Item>
                            <Flex.Item>
                                2.建立优质的客户推荐渠道，坚持项目来源于合格的金融机构，杜绝鱼龙混杂的中介机构。
                            </Flex.Item>
                        </Flex.Item>
                        <Flex.Item style={{padding:'2% 5%',marginTop:'0.1rem'}}>
                            <img style={{width:'100%'}} src={ts2}/>
                        </Flex.Item>
                        <Flex.Item className={`${s.color1}`} style={{padding:'2% 5%',marginTop:'0.1rem'}}>
                            <Flex.Item>
                                A 推荐人同意提供连带责任担保且具备担保能力，平台同意进行审核 。
                            </Flex.Item>
                            <Flex.Item>
                                B 网站导入部分会通过风控模型进行审核，合格的会进一步跟进 。
                            </Flex.Item>
                            <Flex.Item>
                                C 中介推荐：平台会严格审查中介实力和口碑，防止黑中介或资金掮客推荐的垃圾项目。 
                            </Flex.Item>
                            <Flex.Item>
                                D 金融机构推荐的项目，经过金融机构分行一级风险审查评估后的项目，可以优先进入平台。
                            </Flex.Item>
                        </Flex.Item>
                        <Flex.Item>
                            <img style={{width:'100%'}} src={ts4}/>
                        </Flex.Item>

                        <Flex direction="row"  style={{padding:'2% 5%',marginTop:'0.1rem'}}>
                            <Flex.Item>
                                <img style={{width:'100%'}} src={ts3}/>
                            </Flex.Item>
                            <Flex.Item>
                                <Flex.Item>
                                    <Flex.Item className={`${s.title}`}>
                                        风险拨备金
                                    </Flex.Item>
                                    <Flex.Item className={`${s.desc}`}>
                                        安心投针对每笔借款向借款人根据服务类型及借款人的信用等级计提一定比例的风险备用金
                                        计提的风险备用金存放入”风险备用金账户”进行专户管理。风险备用金的计提标准和垫付规则详见分类垫付规则明细表。
                                    </Flex.Item>
                                </Flex.Item>
                            </Flex.Item>
                        </Flex>

                        <Flex direction="row"  style={{padding:'2% 5%',marginTop:'0.1rem'}}>
                            <Flex.Item>
                                <Flex.Item>
                                    <Flex.Item className={`${s.title}`}>
                                        法律援助基金
                                    </Flex.Item>
                                    <Flex.Item className={`${s.desc}`}>
                                        我们在自有资金中提取一定额度设立了法律援助基金，安心投的该笔资金专项用于为平台的全部投资人提供法律援助支持。如任一融资项目发生逾期并须启动法律程序时，安心投
                                        将启用该笔资金为投资人聘请专业律师代表投资人启动法律程序解决争议确保投资人在极端情况下能够及时行动有效维权，最大限度地保护投资人的利益。
                                    </Flex.Item>
                                </Flex.Item>
                            </Flex.Item>
                            <Flex.Item>
                                <img style={{width:'100%'}} src={ts5}/>
                            </Flex.Item>
                        </Flex>
                        
                      </Flex>}
                </div>

                <Footer base={true}/>

        </div>)

        }
    }
 
